<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
	</head>
	<style>
		#app {
			perspective: 500px; /* 设置观察者的距离，子元素有透视效果 */
		}
		.box {
			width: 200px;
			height: 200px;
			margin: 100px auto;
			position: relative;
			transition: transform 1s;
			transform-style: preserve-3d;
		}
		.box div {
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0.8;
			border: 2px solid black;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			font-weight: bold;
		}
		.back {
			background-color: rgb(189, 37, 49);
			transform: translateZ(-100px) rotateY(180deg);
		}
		.left {
			background-color: rgb(80, 231, 105);
			transform: translateX(-100px) rotateY(-90deg);
		}
		.right {
			background-color: rgb(191, 197, 195);
			transform: translateX(100px) rotateY(90deg);
		}
		.top {
			background-color: rgb(93, 68, 218);
			transform: translateY(-100px) rotateX(90deg);
		}
		.bottom {
			background-color: rgb(233, 68, 203);
			transform: translateY(100px) rotateX(-90deg);
		}
		.front {
			background-color: rgb(237, 203, 33);
			transform: translateZ(100px);
		}
	</style>
	<body>
		<div id="app">
			<div class="box" :style="{ transform: 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)' }">
				<div class="back" @click="rotateCube"></div>
				<div class="left" @click="rotateCube"></div>
				<div class="right" @click="rotateCube"></div>
				<div class="top" @click="rotateCube"></div>
				<div class="bottom" @click="rotateCube"></div>
				<div class="front" @click="rotateCube"></div>
			</div>
			<button @click="rotateYaxis">加一圈</button>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						rotateX: 0,
						rotateY: 0
					};
				},
				methods: {
					rotateCube() {
						this.rotateX += 90;
						this.rotateY += 90;
					},
					rotateYaxis() {
						this.rotateX += 360;
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>
